<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=" width=device-width, initial-scale=1">
    <meta name="author" content="Mousse">

    <title>检索页</title>

    <!--<link href="../static/css/mm.css" rel="stylesheet" type="text/css">-->
    <style type="text/css">

        form {
            position: relative;
            width: 400px;
            margin: 0 auto;
        }

        input, button {
            border: none;
            outline: none;
        }

        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }

        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }
        /*搜索框5*/
        .bar5 input, .bar5 button {
            background: transparent;
        }
        .bar5 input {
            border: 2px solid #F9F0DA;
        }
        .bar5 button {
            top: 0;
            right: 0;
        }
        .bar5 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
        .bar5 input:focus {
            border-color: #311c24
        }

        body {
        weight:100%;
        height:100%;
        background: #090C13;
        }
        div.hh {
        height:50px;
        }
        div.search_section{
        height:500px;
        background-size:cover;
        }
        a{
        text-decoration:none;
        }
        .bar button {
            top: 0;
            right: 0;
            background: transparent;
        }
        .bar button:before {
        }


</style>
</head>

<body>
    <div class="hh">
        <h1 align="center" style="color: white;font-size:25px">基于知识图谱的图书馆数据系统</h1>
    </div>

    <video id="v" style="width: 640px;height: 480px;"></video>
    <canvas id="canvas" style="display:none;"></canvas>
    <img src="http://placehold.it/640x480&text=Your%20image%20here%20%20%20..." id="photo" alt="photo">
    <button id="take">拍照</button>
<div class="search_section">
        <a class="search bar5">
            <div>
                <form action="/index_img" method=post enctype=multipart/form-data>
                    <input value="none" name="tijiao" id="tijiao">
                    <button name="jiansuo" id="jiansuo" type="submit"></button>
                </form>
            </div>

        </a>
    <a class="search bar">
        <form action="/t_text"  method = 'post'>
                <button class="search bar" type="submit"  style="height: 30px;
                    width: 100px;
                    cursor: pointer;
                    position: absolute;
                    font-size:15px;
                font-size:10px;color:white">文字检索>></button>
            </form>
    </a>

            <!--<div>
              <form action="" method=post enctype=multipart/form-data>
                <input type=file name=file>
                <input type=submit value=搜索 class="btn-default btn">
              </form>
            </div>-->

        </div>

    <script>
        !(function () {
            // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
            if (navigator.mediaDevices === undefined) {
                navigator.mediaDevices = {};
            }
            if (navigator.mediaDevices.getUserMedia === undefined) {
                navigator.mediaDevices.getUserMedia = function (constraints) {
                    // 首先，如果有getUserMedia的话，就获得它
                    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                    if (!getUserMedia) {
                        return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                    }

                    // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                    return new Promise(function (resolve, reject) {
                        getUserMedia.call(navigator, constraints, resolve, reject);
                    });
                }
            }
            const constraints = {
                video: true,
                audio: false
            };
            let videoPlaying = false;
            let v = document.getElementById('v');
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then(stream => {
                // 旧的浏览器可能没有srcObject
                if ("srcObject" in v) {
                    v.srcObject = stream;
                } else {
                    // 防止再新的浏览器里使用它，应为它已经不再支持了
                    v.src = window.URL.createObjectURL(stream);
                }
                v.onloadedmetadata = function (e) {
                    v.play();
                    videoPlaying = true;
                };
            }).catch(err => {
                console.error(err.name + ": " + err.message);
            })
            document.getElementById('take').addEventListener('click', function () {
                if (videoPlaying) {
                    let canvas = document.getElementById('canvas');
                    canvas.width = v.videoWidth;
                    canvas.height = v.videoHeight;
                    canvas.getContext('2d').drawImage(v, 0, 0);
                    let data = canvas.toDataURL('image/png');
                    document.getElementById('photo').setAttribute('src', data);
                    var imgData = canvas.toDataURL("image/jpg");
                    var base64Data = data.split(",")[1];
                    document.getElementById('tijiao').setAttribute('value',base64Data);

                }
            }, false);
        })();
    </script>

</div>

	<footer align="center">
	    <div id="container">
	        <p style="color:white">大连海事大学创新创业训练</p>
	    </div>
	</footer>

</body>

</html>
